<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '已录入',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 物品列表 -->
    <view class="space-y-3">
      <view
        v-for="(item, index) in itemList"
        :key="index"
        class="bg-white rounded-lg p-4 flex items-center"
      >
        <!-- 左侧图标 -->
        <image src="/static/icons/box.png" class="w-12 h-12"></image>

        <!-- 中间内容 -->
        <view class="flex-1 ml-3">
          <view class="text-base font-medium">物品信息</view>
          <view class="text-sm text-gray-500 mt-1">
            {{ item.description }}
          </view>
        </view>

        <!-- 右侧箭头 -->
        <uni-icons type="right" size="16" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 底部选项卡 -->
    <!-- <view class="fixed bottom-0 left-0 right-0 bg-white px-4 py-3">
          <view class="flex gap-4">
            <view
              class="flex-1 rounded-lg py-2 text-center text-sm"
              :class="activeTab === 'pending' ? 'bg-blue-50 text-gray-600' : 'bg-white text-gray-400'"
              @click="activeTab = 'pending'"
            >
              待确认
            </view>
            <view
              class="flex-1 rounded-lg py-2 text-center text-sm"
              :class="activeTab === 'confirmed' ? 'bg-violet-500 text-white' : 'bg-white text-gray-400'"
              @click="activeTab = 'confirmed'"
            >
              已确认
            </view>
          </view>
        </view> -->
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeTab = ref('pending')

// 模拟数据
const itemList = [
  {
    id: 1,
    description: '顺丰快递 32421341234123',
  },
  {
    id: 2,
    description: '数量3个',
  },
  {
    id: 3,
    description: '数量3个',
  },
]
</script>

<style scoped>
page {
  background-color: #f9fafb;
}
</style>
